<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>厨余可回收绑定记录</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Col span="3" class="mr-10">
                <city @ProvinceData="childByValue"></city>
            </Col>
            <Input class="mr-10" placeholder="编号" v-model="queryData.id" style="width:200px;" />
            <Input class="mr-10" placeholder="用户姓名" v-model="queryData.name" style="width:200px;" />
            <Input class="mr-10" placeholder="地址" v-model="queryData.address" style="width:200px;" />
            <Input class="mr-10" placeholder="电话" v-model="queryData.mobilephone" style="width:200px;" />
            <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
        </div>
      </Card>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
            <!-- <span style="float: right;">共{{queryData.totalRecord}}条数据</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from "@/api/base_sys/gcDispenser.js";
// import moment from "moment";
import {Message} from "iview";
import city from "@/view/test/city.vue"

  export default {
    components: {
      city
    },
    data() {
      return {
        url: '/api/gcDispenserPrestore/list',
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: "厨余垃圾袋",
              key: "kitchen",
              align: "center",
              minWidth: 100
            },
            {
              title: "可回收垃圾袋",
              key: "recyclable",
              align: "center",
              minWidth: 100
            },
            {
              title: "绑定时间",
              key: "subtime",
              align: "center",
              minWidth:100,
            },
            {
              title: "操作",
              key: "state",
              align: "center",
              minWidth:100,
              render: (h, params) => {
                return h('i-button',{
                      props: { type: 'error', size: 'small'},
                      style: {margin: '0 3px'},
                      on: {
                          click:()=> {
                              this.remove(params.row.kitchen)
                          }
                      }
                  },'删除')
              }
            },
            
          ]
        },
        // 页面查询数据
        queryData: {
            limit: 10,
            page: 1,
            totalRecord: 0,
            machineid: '', // 机器编号
        }
      }
    },
    created() {
      this.getTableData();
    },
    methods: {
      click() {
        let getCities = this.value;
      },
      // 获取列表
      async getTableData() {
        console.log(this.queryData);
        this.queryData.totalRecord = undefined;
        let result = await gcDispenserApi.getData(this.url,this.queryData)
        console.log(result);
        this.list.tableData = result.data.list;
        this.queryData.totalRecord = result.data.totalRecord;
        this.queryData.limit = result.data.pageSize;
      },
     
      childByValue(newObject) {
        this.queryData.provid = newObject.provid||'';
        this.queryData.cityid = newObject.cityid||'';
        this.queryData.distid = newObject.distid||'';
        this.queryData.strtid = newObject.strtid||'';
        this.queryData.commid = newObject.commid||'';
        this.queryData.comminid = newObject.comminid||'';
      },
      //查询
      inQuire() {
		    this.queryData.page=1;
        this.getTableData();
      },
      // 删除
      remove(id) {
          console.log(id);
          this.$Modal.confirm({
            title: "删除确认",
            content:
            "<p>确认要删除此条记录吗？</p>",
            loading: true,
            onOk: async () => {
                let result = await gcDispenserApi.del(`/api/gcDispenserPrestore/${id}`)
                if(result) {
                    this.$Message.success("操作成功")
                    this.getTableData()
                    this.$Modal.remove();
                    return
                }
                this.$Message.error("操作失败" + e)
                this.$Modal.remove();
            }
        });
      },
      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },
      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },
    },

    
  };
</script>
